<style lang="less">
@import '~/assets/style/vars.less';
@import '~/assets/style/mixin.less';

.comment-textarea {
  /deep/textarea.ant-input {
    margin-bottom: 0;
    min-height: 175px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    resize: none;

    &:hover, &:focus {
       + .comment-textarea-explain {
        border-color: @input-hover-border-color;
      }
    }
  }

  &-explain {
    .anim-color();
    position: relative;
    margin-top: -1px;
    padding: 6px 10px 5px;
    background-color: @color-muted;
    border: 1px solid @input-border-color;
    border-top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    line-height: 34px;
    text-align: right;
  }

  &:hover {
    .comment-textarea-explain,
    /deep/textarea.ant-input {
      border-color: @input-hover-border-color;
    }
  }
}
</style>

<template>
  <div class="comment-textarea">
    <slot />

    <div class="comment-textarea-explain">
      {{ explain }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    explain: {
      type: String,
      default: '可用Markdown格式',
    },
  },
}
</script>
